<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Dynamic Routing | Vue Router</title>
    <meta name="description" content="The official router for Vue.js.">
    <link rel="stylesheet" href="static/css/style.720cf281.css">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/Home.5d2e3154.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.78f8f7a5.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.823f6de3.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/AlgoliaSearchBox.b1511f6a.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/app.4a3417cf.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/guide_advanced_dynamic-routing.md.f79d5ab5.lean.js">
    
    <link rel="icon" href="static/picture/logo.png">
  <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
  <script src="static/js/thesemetrics@latest.js" async=""></script>
  <meta name="twitter:title" content="Dynamic Routing | Vue Router">
  <meta property="og:title" content="Dynamic Routing | Vue Router">
  </head>
  <body>
    <div id="app"><div class="main-container" data-v-46b24580=""><!----><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="javascript:;" aria-label="Vue Router, back to home" data-v-675d8756="" data-v-4a583abe=""><!----> Vue Router</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="javascript:;" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="javascript:;" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="javascript:;" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--[--><div class="sponsors sponsors-top" data-v-46b24580=""><span data-v-46b24580="">Platinum Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="introduction2.html">Introduction</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="installation1.html">Installation</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">Essentials</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="javascript:;">Getting Started</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="dynamic-matching.html">Dynamic Route Matching</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="route-matching-syntax.html">Routes&#39; Matching Syntax</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="nested-routes.html">Nested Routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="navigation.html">Programmatic Navigation</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="named-routes.html">Named Routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="named-views.html">Named Views</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="redirect-and-alias.html">Redirect and Alias</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="passing-props.html">Passing Props to Route Components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="history-mode.html">Different History modes</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="navigation-guards.html">Navigation guards</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="meta.html">Route Meta Fields</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="data-fetching.html">Data Fetching</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="composition-api1.html">Composition API</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="transitions.html">Transitions</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="scroll-behavior.html">Scroll Behavior</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="lazy-loading.html">Lazy Loading Routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="extending-router-link.html">Extending RouterLink</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="navigation-failures.html">Navigation Failures</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="">Dynamic Routing</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#adding-routes">Adding Routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#adding-routes-inside-navigation-guards">Adding Routes inside navigation guards</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#removing-routes">Removing routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#adding-nested-routes">Adding nested routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#looking-at-existing-routes">Looking at existing routes</a><!----></li></ul></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="index18.html">Migrating from Vue 2</a><!----></li><!--]--></ul><!--[--><!--[--><div class="sponsors" data-v-46b24580=""><span data-v-46b24580="">Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" ref_key="el" data-v-5941b830=""></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="dynamic-routing" tabindex="-1">Dynamic Routing <a class="header-anchor" href="#dynamic-routing" aria-hidden="true">#</a></h1><p>Adding routes to your router is usually done via the <a href="javascript:;"><code>routes</code> option</a> but in some situations, you might want to add or remove routes while the application is already running. Application with extensible interfaces like <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue CLI UI</a> can use this to make the application grow.</p><h2 id="adding-routes" tabindex="-1">Adding Routes <a class="header-anchor" href="#adding-routes" aria-hidden="true">#</a></h2><p>Dynamic routing is achieved mainly via two functions: <code>router.addRoute()</code> and <code>router.removeRoute()</code>. They <strong>only</strong> register a new route, meaning that if the newly added route matches the current location, it would require you to <strong>manually navigate</strong> with <code>router.push()</code> or <code>router.replace()</code> to display that new route. Let&#39;s take a look at an example:</p><p>Imagine having the following router with one single route:</p><div class="language-js"><pre><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/:articleName&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Article <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Going to any page, <code>/about</code>, <code>/store</code>, or <code>/3-tricks-to-improve-your-routing-code</code> ends up rendering the <code>Article</code> component. If we are on <code>/about</code> and we add a new route:</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>The page will still show the <code>Article</code> component, we need to manually call <code>router.replace()</code> to change the current location and overwrite where we were (instead of pushing a new entry, ending up in the same location twice in our history):</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// we could also use this.$route or route = useRoute() (inside a setup)</span>
router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>router<span class="token punctuation">.</span>currentRoute<span class="token punctuation">.</span>value<span class="token punctuation">.</span>fullPath<span class="token punctuation">)</span>
</code></pre></div><p>Remember you can <code>await router.replace()</code> if you need to wait for the new route to be displayed.</p><h2 id="adding-routes-inside-navigation-guards" tabindex="-1">Adding Routes inside navigation guards <a class="header-anchor" href="#adding-routes-inside-navigation-guards" aria-hidden="true">#</a></h2><p>If you decide to add or remove routes inside of a navigation guard, you should not call <code>router.replace()</code> but trigger a redirection by returning the new location:</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token parameter">to</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">hasNecessaryRoute</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token function">generateRoute</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// trigger a redirection</span>
    <span class="token keyword">return</span> to<span class="token punctuation">.</span>fullPath
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>The example above assumes two things: first, the newly added route record will match the <code>to</code> location, effectively resulting in a different location from the one we were trying to access. Second, <code>hasNecessaryRoute()</code> returns <code>false</code> after adding the new route to avoid an infinite redirection.</p><p>Because we are redirecting, we are replacing the ongoing navigation, effectively behaving like the example shown before. In real world scenarios, adding is more likely to happen outside of navigation guards, e.g. when a view component mounts, it register new routes.</p><h2 id="removing-routes" tabindex="-1">Removing routes <a class="header-anchor" href="#removing-routes" aria-hidden="true">#</a></h2><p>There are few different ways to remove existing routes:</p><ul><li>By adding a route with a conflicting name. If you add a route that has the same name as an existing route, it will remove the route first and then add the route:<div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// this will remove the previously added route because they have the same name and names are unique</span>
router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/other&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Other <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></li><li>By calling the callback returned by <code>router.addRoute()</code>:<div class="language-js"><pre><code><span class="token keyword">const</span> removeRoute <span class="token operator">=</span> router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span>routeRecord<span class="token punctuation">)</span>
<span class="token function">removeRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// removes the route if it exists</span>
</code></pre></div>This is useful when the routes do not have a name</li><li>By using <code>router.removeRoute()</code> to remove a route by its name:<div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// remove the route</span>
router<span class="token punctuation">.</span><span class="token function">removeRoute</span><span class="token punctuation">(</span><span class="token string">&#39;about&#39;</span><span class="token punctuation">)</span>
</code></pre></div>Note you can use <code>Symbol</code>s for names in routes if you wish to use this function but want to avoid conflicts in names.</li></ul><p>Whenever a route is removed, <strong>all of its aliases and children</strong> are removed with it.</p><h2 id="adding-nested-routes" tabindex="-1">Adding nested routes <a class="header-anchor" href="#adding-nested-routes" aria-hidden="true">#</a></h2><p>To add nested routes to an existing route, you can pass the <em>name</em> of the route as its first parameter to <code>router.addRoute()</code>, this will effectively add the route as if it was added through <code>children</code>:</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Admin <span class="token punctuation">}</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;settings&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> AdminSettings <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>This is equivalent to:</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/admin&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">component</span><span class="token operator">:</span> Admin<span class="token punctuation">,</span>
  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;settings&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> AdminSettings <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="looking-at-existing-routes" tabindex="-1">Looking at existing routes <a class="header-anchor" href="#looking-at-existing-routes" aria-hidden="true">#</a></h2><p>Vue Router gives you two functions to look at existing routes:</p><ul><li><a href="javascript:;"><code>router.hasRoute()</code></a>: check if a route exists</li><li><a href="javascript:;"><code>router.getRoutes()</code></a>: get an array with all the route records.</li></ul></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-fb8d84c6=""><div class="edit" data-v-fb8d84c6=""><div class="edit-link" data-v-fb8d84c6="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Suggest changes to this page <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-fb8d84c6=""><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4="" data-v-38ede35f=""><div class="container" data-v-38ede35f=""><div class="prev" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f=""><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f="">Navigation Failures</span></a></div><div class="next" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><span class="text" data-v-38ede35f="">Migrating from Vue 2</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f=""><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17=""><div class="bsa-cpc" data-v-4ce5ad17=""></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"321240c3\",\"guide_advanced_composition-api.md\":\"68a790ce\",\"guide_advanced_data-fetching.md\":\"370bc89e\",\"guide_advanced_dynamic-routing.md\":\"f79d5ab5\",\"guide_advanced_extending-router-link.md\":\"b5cf395a\",\"guide_advanced_lazy-loading.md\":\"7a352201\",\"guide_advanced_meta.md\":\"5a4590ab\",\"guide_advanced_navigation-failures.md\":\"343e3632\",\"guide_advanced_navigation-guards.md\":\"73b500ce\",\"guide_advanced_scroll-behavior.md\":\"60e3ea87\",\"guide_advanced_transitions.md\":\"9784e7ac\",\"guide_essentials_dynamic-matching.md\":\"18d86148\",\"guide_essentials_history-mode.md\":\"59a2bcce\",\"guide_essentials_named-routes.md\":\"f89ffec5\",\"guide_essentials_named-views.md\":\"41a2008e\",\"guide_essentials_navigation.md\":\"80b153b7\",\"guide_essentials_nested-routes.md\":\"ba58046f\",\"guide_essentials_passing-props.md\":\"bcc923d9\",\"guide_essentials_redirect-and-alias.md\":\"17e6ff8d\",\"guide_essentials_route-matching-syntax.md\":\"dec0fed1\",\"guide_index.md\":\"b96b8b52\",\"guide_migration_index.md\":\"f1c1eead\",\"index.md\":\"af883fea\",\"installation.md\":\"62f300a6\",\"introduction.md\":\"7557a17f\",\"zh_api_index.md\":\"9f7c32af\",\"zh_guide_advanced_composition-api.md\":\"a9ae8936\",\"zh_guide_advanced_data-fetching.md\":\"3402d49f\",\"zh_guide_advanced_dynamic-routing.md\":\"519d3549\",\"zh_guide_advanced_extending-router-link.md\":\"9ac39d5c\",\"zh_guide_advanced_lazy-loading.md\":\"4f7d5f99\",\"zh_guide_advanced_meta.md\":\"b231c4a4\",\"zh_guide_advanced_navigation-failures.md\":\"5e332799\",\"zh_guide_advanced_navigation-guards.md\":\"95378824\",\"zh_guide_advanced_scroll-behavior.md\":\"5a120e17\",\"zh_guide_advanced_transitions.md\":\"b1d10912\",\"zh_guide_essentials_dynamic-matching.md\":\"a2fdd595\",\"zh_guide_essentials_history-mode.md\":\"12d3427d\",\"zh_guide_essentials_named-routes.md\":\"7d1cfb92\",\"zh_guide_essentials_named-views.md\":\"26d1c4bb\",\"zh_guide_essentials_navigation.md\":\"80d9c078\",\"zh_guide_essentials_nested-routes.md\":\"db791098\",\"zh_guide_essentials_passing-props.md\":\"01c7eddf\",\"zh_guide_essentials_redirect-and-alias.md\":\"1d28625c\",\"zh_guide_essentials_route-matching-syntax.md\":\"d0f00217\",\"zh_guide_index.md\":\"522bf3e7\",\"zh_guide_migration_index.md\":\"d9210e4d\",\"zh_index.md\":\"3945a14c\",\"zh_installation.md\":\"f591290e\",\"zh_introduction.md\":\"a27a7262\"}")</script>
    <script type="module" async="" src="static/js/app.4a3417cf.js"></script>
    
  </body>
</html>